const RootStack = createSharedElementStackNavigator()

return (
     <RootStack.Navigator
          initialRouteName="TabNav"
          screenOptions={{
            headerShown: false,
          }}
        >
          <RootStack.Screen name="TabNav" component={TabNav} />
          <RootStack.Screen
            name="ProductDetail"
            component={ProductDetail}
            sharedElements={route => {
              const { params } = route
              return ['headerImage' + params.id]
            }}
            options={{
              cardStyleInterpolator: ({ current: { progress } }) => {
                return { cardStyle: { opacity: progress } }
              },
            }}
          />
    </RootStack.Navigator>
)

const ProductCard: FC<Props> = ({ product, style }) => {
  const navigation = useNavigation()

  const price = useLocalizePrice(priceDetails?.price, priceDetails.currency)

  return (
   <View
      testID={'product-card-' + name}
      style={style}
      onPress={() =>
        //@ts-ignore
        navigation.navigate('ProductDetail', {
          id: product.id,
        })
      }
    >
      <View>
        <SharedElement id={`headerImage${id}`}>
          <Image
            source={{
              uri: images.mainPicture,
            }}
            resizeMode="cover"
          />
        </SharedElement>
      </View>
    </View>
  )
}

export default function ProductDetail() {
  const { params } = useRoute<RouteProp<ParamList, 'productDetail'>>()
  const { id } = params

  const { bottom } = useSafeAreaInsets()
  const scrollY = useRef(new Animated.Value(0)).current


  const onScroll = Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: {
            y: scrollY,
          },
        },
      },
    ],
    {
      useNativeDriver: true,
    }
  )

  return (
    <View bottom={bottom} testID="product-detail">
      <Animated.ScrollView
        showsVerticalScrollIndicator={false}
        onScroll={onScroll}
      >
        <SharedElement id={`headerImage${id}`} style={{ flex: 1 }}>
          <Image source={{ uri: images[0] }} />
        </SharedElement>
      </Animated.ScrollView>
    </View>
  )
}